<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-color: #f5f5f5;
    }
    .active{
      color: orangered;
      
    }
    .sub1{
      background-color: orangered;
      border-radius: 10px;
      color: white;
    }
  </style>
</head>

<body>
  <div id="app">
    <v-app style="background-color: #f5f5f5;">
      <!-- 顶部 -->
      <v-app-bar app fixed flat>
        <v-icon>mdi-credit-card-scan-outline</v-icon>
        <v-spacer></v-spacer>
        <v-list style="border-radius: 30px; height: 30px; width: 70%; border: 1px solid orangered;"
          class="d-flex justify-space-between align-center">
          <div class="d-flex align-center">
            <v-icon color="grey lighten-1" class=" mr-2">mdi-magnify</v-icon>
            <v-carousel vertical :show-arrows='false' hide-delimiters height="20" cycle>
              <v-carousel-item class="caption" v-for='item in list8' :key="item.id">{{item.name}}</v-carousel-item>
            </v-carousel>
            <!-- <content style="font-size: x-small;">护理液</content> -->
          </div>
          <div>
            <v-icon>mdi-camera-outline</v-icon>
            <v-btn color="deep-orange " height="30" x-small width="48" rounded class="white--text">搜索
            </v-btn>
          </div>
        </v-list>
        <v-spacer></v-spacer>
        <v-avatar size="30"><img src="http://img5.imgtn.bdimg.com/it/u=2582427750,4163688555&fm=26&gp=0.jpg" alt="">
        </v-avatar>
        <v-spacer></v-spacer>
        <v-icon>mdi-barcode-scan</v-icon>
      </v-app-bar>

      <v-content app flat>
        <v-slide-group>
          <v-slide-item v-for='item in list4' :key="item.id">
            <v-card color="transparent" flat>

              <v-sheet color="transparent" style="width: 16vw; height: 20; text-align: center; color: red;"
                v-if="item.id == '1'" class="font-weight-black">{{item.name}}</v-sheet>
              <v-sheet color="transparent" style="width: 16vw; height: 20; text-align: center; color: black;" v-else>
                {{item.name}}</v-sheet>
            </v-card>

          </v-slide-item>
        </v-slide-group>


        <!-- 轮播图 -->
        <v-carousel :show-arrows='false' height="250" cycle>
          <v-carousel-item :key="item.id" v-for='item in list' max-width='100%' max-height='200' :src='item.path'>
          </v-carousel-item>
        </v-carousel>

        <!-- 滑动组 -->
        <v-slide-group class="mt-2">
          <v-slide-item :key="item.id" v-for="item in list1">
            <v-card flat max-height="170" width="20vw">
              <div v-ripple style="text-align: center;">
                <v-icon>{{item.name}}</v-icon>
                <v-card-title class="pa-0 d-flex justify-space-around" style="font-size: x-small;">{{item.name1}}
                </v-card-title>
              </div>

              <div v-ripple style="text-align: center;">
                <v-icon>{{item.name2}}</v-icon>
                <v-card-title class="pa-0 d-flex justify-space-around" style="font-size: x-small;">{{item.name3}}
                </v-card-title>
              </div>
            </v-card>
          </v-slide-item>
        </v-slide-group>

        <!-- 聚划算 淘宝直播组 -->
        <div class="d-flex jusutify-space-between">
          <div class="ml-3 mt-2" style="flex:1;">
            <div>
              <div class="font-weight-black black--text">聚划算</div>
              <v-slide-group class="mt-1">
                <v-card width="21vw" class="border-radius:11" color="green">
                  <v-card-title style="font-size: xx-small;" class="pa-0 red--text accent-3 ml-2">淘抢购</v-card-title>
                  <v-img src="http://img0.imgtn.bdimg.com/it/u=2874699761,614047177&fm=26&gp=0.jpg" width="21vw"
                    height="21vw"></v-img>
                </v-card>

                <v-card width="21vw" class="border-radius:11 ml-2" color="green">
                  <v-card-title style="font-size: xx-small;" class="pa-0 deep-orange--text ml-2">抢大额券</v-card-title>
                  <v-img src="http://img0.imgtn.bdimg.com/it/u=2874699761,614047177&fm=26&gp=0.jpg" width="21vw"
                    height="21vw"></v-img>
                </v-card>
              </v-slide-group>
            </div>

            <div>
              <div>

                <div class="font-weight-black red--text mt-2">百亿补贴</div>
              </div>
              <v-slide-group class="mt-1">
                <v-card width="21vw" class="border-radius:11" color="green">

                  <v-img src="http://img0.imgtn.bdimg.com/it/u=2874699761,614047177&fm=26&gp=0.jpg" width="21vw"
                    height="21vw"></v-img>
                  <v-card-title class="red--text d-flex justify-space-around pa-0" style="font-size: x-small;">$49.9
                  </v-card-title>
                </v-card>

                <v-card width="21vw" class="border-radius:11 ml-2" color="green">

                  <v-img src="http://img0.imgtn.bdimg.com/it/u=2874699761,614047177&fm=26&gp=0.jpg" width="21vw"
                    height="21vw"></v-img>
                  <v-card-title class="red--text d-flex justify-space-around pa-0" style="font-size: x-small;">$7.5
                  </v-card-title>
                </v-card>
              </v-slide-group>
            </div>

            <div>
              <div class="font-weight-black black--text mt-2">天天特卖</div>
              <v-slide-group class="mt-1">
                <v-card width="21vw" class="border-radius:11px" color="green">
                  <v-card-title style="font-size: xx-small;"
                    class="pa-0 pink--text darken-1 d-flex justify-space-around font-weight-bold">工厂直购</v-card-title>
                  <v-img src="http://img0.imgtn.bdimg.com/it/u=2874699761,614047177&fm=26&gp=0.jpg" width="21vw"
                    height="21vw"></v-img>
                </v-card>

                <v-card width="21vw" class="border-radius:11 ml-2" color="green">
                  <v-card-title style="font-size: xx-small;" class="pa-0 red--text ml-1 font-weight-bold">9.9包邮
                  </v-card-title>
                  <v-img src="http://img0.imgtn.bdimg.com/it/u=2874699761,614047177&fm=26&gp=0.jpg" width="21vw"
                    height="21vw"></v-img>
                </v-card>
              </v-slide-group>
            </div>
          </div>
          <v-divider vertical></v-divider>

          <div class="ml-3 mt-2" style="flex:1;">
            <div>
              <div class=" font-weight-black black--text ">淘宝直播</div>
              <v-slide-group class="mt-1">
                <v-card width="21vw" class="border-radius:11">
                  <v-card-title style="font-size: xx-small;" class="pa-0 pink--text darken-1 ">铁粉超爱</v-card-title>
                  <v-img src="http://img0.imgtn.bdimg.com/it/u=2874699761,614047177&fm=26&gp=0.jpg" width="21vw"
                    height="21vw"></v-img>
                </v-card>

                <v-card width="21vw" class="border-radius:11 ml-2">
                  <v-card-title> </v-card-title>
                  <v-img src="http://img0.imgtn.bdimg.com/it/u=2874699761,614047177&fm=26&gp=0.jpg" width="21vw"
                    height="21vw"></v-img>
                </v-card>
              </v-slide-group>
            </div>

            <div>
              <div class="d-flex align-center mt-2">
                <div class=" font-weight-black black--text ">有好货</div>
                <div class="blue darken-1 ml-1 white--text"
                  style="font-size: x-small; border-radius: 5px;width: 50px; height: 15px;text-align: center;">品质好货
                </div>
              </div>

              <v-slide-group class="mt-1">
                <v-card width="21vw" class="border-radius:11">
                  <v-card-title style="font-size: xx-small;" class="pa-0 blue--text darken-1 ">口碑推荐</v-card-title>
                  <v-img src="http://img0.imgtn.bdimg.com/it/u=2874699761,614047177&fm=26&gp=0.jpg" width="21vw"
                    height="21vw"></v-img>
                </v-card>

                <v-card width="21vw" class="border-radius:11 ml-2">
                  <v-card-title></v-card-title>
                  <v-img src="http://img0.imgtn.bdimg.com/it/u=2874699761,614047177&fm=26&gp=0.jpg" width="21vw"
                    height="21vw"></v-img>
                </v-card>
              </v-slide-group>
            </div>

            <div>
              <div class="d-flex align-center mt-2">
                <div class=" font-weight-black black--text">每日好店</div>
                <div class="red white--text ml-1"
                  style="font-size: x-small; border-radius: 5px;width: 30px; height: 15px;text-align: center;">精选</div>
              </div>
              <v-slide-group class="mt-1">
                <v-card width="21vw" class="border-radius:11" color="green">
                  <v-card-title style="font-size: xx-small;" class="pa-0 orange--text lighten-1">挖深藏的店</v-card-title>
                  <v-img src="http://img0.imgtn.bdimg.com/it/u=2874699761,614047177&fm=26&gp=0.jpg" width="21vw"
                    height="21vw"></v-img>
                </v-card>

                <v-card width="21vw" class="border-radius:11 ml-2" color="green">
                  <v-card-title">
                    </v-card-title>
                    <v-img src="http://img0.imgtn.bdimg.com/it/u=2874699761,614047177&fm=26&gp=0.jpg" width="21vw"
                      height="21vw"></v-img>
                </v-card>
              </v-slide-group>
            </div>
          </div>
        </div>
        <v-divider class="mt-2"></v-divider>
        <div class="d-flex align-center ma-3">
          <div>淘宝头条</div>
          <div class="ml-2">淘宝头条</div>
        </div>

        </v-toolbar>

        <!-- 选项卡 -->
        <v-tabs show-arrows v-model='neirong'>
          <v-tab class="d-flex flex-column align-center" @click='select(index)' v-for='(item,index) in list7' :key="item.id">
            <div class=" font-weight-black" :class='{active:index == curr}'>{{item.name}}</div>
            <div style="font-size: 10px;" class=" font-weight-regular" :class='{sub1:index == curr}'>{{item.name1}}
            </div><v-divider inset vertical></v-divider>

          </v-tab>
          
          <!-- <v-tab class="d-flex flex-column align-center">
            <div class="black--text font-weight-black">直播</div>
            <div style="font-size: 10px; " class=" font-weight-regular">新品搭配购</div>
          </v-tab>
          <v-divider inset vertical></v-divider>

          <v-tab class="d-flex flex-column align-center">
            <div class="black--text font-weight-black">便宜好货</div>
            <div class=" font-weight-regular caption">低价抢购</div>
          </v-tab>
          <v-divider inset vertical></v-divider>
          <v-tab class="d-flex flex-column align-center">
            <div class="black--text font-weight-black">买家秀</div>
            <div class=" font-weight-regular caption">海量晒单</div>
          </v-tab> -->
        </v-tabs>

        <!-- 选项卡组 -->
        <v-tabs-items v-model='neirong'>
          <v-tab-item>
            <div class="d-flex justify-space-between ml-3 mr-3 " v-for='item in list3' :key="item.id">
              <v-card width="46vw">
                <v-img width="46vw" height="150" :src='item.path'></v-img>
                <v-card-subtitle class="pa-0 text-2  black--text ml-2 mt-2" style="min-height: 50px;">{{item.name}}</v-card-subtitle>
                <v-card-text>
                  <div class="d-flex align-center mt-2" style="margin-left: -4px;">
                    <div style="font-size: xx-small;" class="orange--text">{{item.name1}}</div>
                    <div style="font-size: xx-small;" class="grey--text ml-1">{{item.name2}}</div>
                  </div>
                </v-card-text>
              </v-card>

              <v-card width="46vw">
                <v-img width="46vw" height="150" :src='item.path1'></v-img>
                <v-card-subtitle class="pa-0 text-2  black--text ml-2 mt-2" style="min-height: 50px;">{{item.name3}}</v-card-subtitle>
                <v-card-text>
                  <div class="d-flex align-center mt-2" style="margin-left: -4px;">
                    <div style="font-size: xx-small;" class="orange--text">{{item.name4}}</div>
                    <div style="font-size: xx-small;" class="grey--text ml-1">{{item.name5}}</div>
                  </div>
                </v-card-text>
              </v-card>
            </div>
          </v-tab-item>

          <v-tab-item>
            <div class="d-flex justify-space-between ml-3 mr-3 " v-for='item in list3' :key="item.id">
              <v-card width="46vw">
                <v-img width="46vw" height="150" :src='item.path'></v-img>
                <v-card-subtitle class="pa-0 text-2  black--text ml-2 mt-2" style="min-height: 50px;">{{item.name}}</v-card-subtitle>
                <v-card-text>
                  <div class="d-flex align-center mt-2" style="margin-left: -4px;">
                    <div style="font-size: xx-small;" class="orange--text">{{item.name1}}</div>
                    <div style="font-size: xx-small;" class="grey--text ml-1">{{item.name2}}</div>
                  </div>
                </v-card-text>
              </v-card>

              <v-card width="46vw">
                <v-img width="46vw" height="150" :src='item.path1'></v-img>
                <v-card-subtitle class="pa-0 text-2  black--text ml-2 mt-2" style="min-height: 50px;">{{item.name3}}</v-card-subtitle>
                <v-card-text>
                  <div class="d-flex align-center mt-2" style="margin-left: -4px;">
                    <div style="font-size: xx-small;" class="orange--text">{{item.name4}}</div>
                    <div style="font-size: xx-small;" class="grey--text ml-1">{{item.name5}}</div>
                  </div>
                </v-card-text>
              </v-card>
            </div>
          </v-tab-item>

          <v-tab-item>
            <div class="d-flex justify-space-between ml-3 mr-3 " v-for='item in list5' :key="item.id">
              <v-card width="46vw">
                <v-img width="46vw" height="150" :src='item.path'></v-img>
                <v-card-subtitle class="pa-0 text-2 black--text ml-2 mt-2" style="min-height: 50px;">{{item.name}}</v-card-subtitle>
                <v-card-text>
                  <div class="d-flex align-center mt-2" style="margin-left: -4px;">
                    <div style="font-size: xx-small;" class="orange--text">{{item.name1}}</div>
                    <div style="font-size: xx-small;" class="grey--text ml-1">{{item.name2}}</div>
                  </div>
                </v-card-text>
              </v-card>

              <v-card width="46vw">
                <v-img width="46vw" height="150" :src='item.path1'></v-img>
                <v-card-subtitle class="pa-0 text-2  black--text ml-2 mt-2" style="min-height: 50px;">{{item.name3}}</v-card-subtitle>
                <v-card-text>
                  <div class="d-flex align-center mt-2" style="margin-left: -4px;">
                    <div style="font-size: xx-small;" class="orange--text">{{item.name4}}</div>
                    <div style="font-size: xx-small;" class="grey--text ml-1">{{item.name5}}</div>
                  </div>
                </v-card-text>
              </v-card>
            </div>
          </v-tab-item>

          <v-tab-item>
            <div class="d-flex justify-space-between ml-3 mr-3 " v-for='item in list6' :key="item.id">
              <v-card width="46vw">
                <v-img width="46vw" height="150" :src='item.path'></v-img>
                <v-card-subtitle class="pa-0 text-2  black--text ml-2 mt-2" style="min-height: 50px;">{{item.name}}</v-card-subtitle>
                <v-card-text>
                  <div class="d-flex align-center mt-2" style="margin-left: -4px;">
                    <div style="font-size: xx-small;" class="orange--text">{{item.name1}}</div>
                    <div style="font-size: xx-small;" class="grey--text ml-1">{{item.name2}}</div>
                  </div>
                </v-card-text>
              </v-card>

              <v-card width="46vw">
                <v-img width="46vw" height="150" :src='item.path1'></v-img>
                <v-card-subtitle class="pa-0 text-2  black--text ml-2 mt-2" style="min-height: 50px;">{{item.name3}}</v-card-subtitle>
                <v-card-text>
                  <div class="d-flex align-center mt-2" style="margin-left: -4px;">
                    <div style="font-size: xx-small;" class="orange--text">{{item.name4}}</div>
                    <div style="font-size: xx-small;" class="grey--text ml-1">{{item.name5}}</div>
                  </div>
                </v-card-text>
              </v-card>
            </div>
          </v-tab-item>
        </v-tabs-items>



      </v-content>


    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          neirong: 0,
          curr:0,
          list8:[
          {
            name:'背包挂件玩偶'
          },
          {
            name:'挂件装饰'
          },
          {
            name:'SKR尖叫鸡'
          },
          {
            name:'精美礼品盒'
          },
          {
            name:'潮流时尚大牌服装'
          },
          {
            name:'黑美人珍珠蛋糕'
          },
          ],
          list7:[
            {
              id:1,
              name:'全部',
              name1:'猜你喜欢',
            },
            {
              id:2,
              name:'直播',
              name1:'新品搭配购',
            },
            {
              di:3,
              name:'便宜好货',
              name1:'低价抢购',
            },
            {
              id:4,
              name:'买家秀',
              name1:'海量晒单',
            },
          ],
          list6: [{
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '豆乳威化饼干夹心整箱网红零食',
              name4: '$9.9',
              name5: '2003人付款',
              path: 'http://img0.imgtn.bdimg.com/it/u=1160601342,3492929116&fm=26&gp=0.jpg',
              path1: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3191798620,1975643952&fm=26&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3392707711,2935757110&fm=11&gp=0.jpg',
              path1: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1010902729,718859890&fm=26&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2583290411,2496778966&fm=26&gp=0.jpg',
              path1: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3232453023,2374757096&fm=26&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2282268516,2929729102&fm=26&gp=0.jpg',
              path1: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1301651541,2372025763&fm=11&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1376743281,407112569&fm=11&gp=0.jpg',
              path1: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2768711611,1305447241&fm=26&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1263450618,399851242&fm=11&gp=0.jpg',
              path1: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3957286167,2944471366&fm=26&gp=0.jpg',
            },

          ],
          list5: [{
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '豆乳威化饼干夹心整箱网红零食',
              name4: '$9.9',
              name5: '2003人付款',
              path: 'http://img0.imgtn.bdimg.com/it/u=1160601342,3492929116&fm=26&gp=0.jpg',
              path1: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3191798620,1975643952&fm=26&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3392707711,2935757110&fm=11&gp=0.jpg',
              path1: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1010902729,718859890&fm=26&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2583290411,2496778966&fm=26&gp=0.jpg',
              path1: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3232453023,2374757096&fm=26&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2282268516,2929729102&fm=26&gp=0.jpg',
              path1: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1301651541,2372025763&fm=11&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1376743281,407112569&fm=11&gp=0.jpg',
              path1: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2768711611,1305447241&fm=26&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1263450618,399851242&fm=11&gp=0.jpg',
              path1: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3957286167,2944471366&fm=26&gp=0.jpg',
            },

          ],
          list4: [{
              id: 1,
              name: '首页',
            },
            {
              name: '食品',
            },
            {
              name: '手机',
            },
            {
              name: '医药',
            },
            {
              name: '洗护',
            },
            {
              name: '生鲜',
            },
            {
              name: '百货',
            },
            {
              name: '首页',
            },
            {
              name: '箱包',
            },
            {
              name: '保健',
            },
            {
              name: '进口',
            },
          ],
          list3: [{
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '豆乳威化饼干夹心整箱网红零食',
              name4: '$9.9',
              name5: '2003人付款',
              path: 'http://img0.imgtn.bdimg.com/it/u=1160601342,3492929116&fm=26&gp=0.jpg',
              path1: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3191798620,1975643952&fm=26&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3392707711,2935757110&fm=11&gp=0.jpg',
              path1: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1010902729,718859890&fm=26&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2583290411,2496778966&fm=26&gp=0.jpg',
              path1: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3232453023,2374757096&fm=26&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2282268516,2929729102&fm=26&gp=0.jpg',
              path1: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1301651541,2372025763&fm=11&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1376743281,407112569&fm=11&gp=0.jpg',
              path1: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2768711611,1305447241&fm=26&gp=0.jpg',
            },
            {
              name: '香菇肥牛麻辣条',
              name1: '$0.18',
              name2: '20303人付款',
              name3: '香菇肥牛麻辣条',
              name4: '$0.18',
              name5: '20303人付款',
              path: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1263450618,399851242&fm=11&gp=0.jpg',
              path1: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3957286167,2944471366&fm=26&gp=0.jpg',
            },

          ],
          list: [{
              path: 'http://img5.imgtn.bdimg.com/it/u=1555368179,3285824614&fm=26&gp=0.jpg'
            },
            {
              path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3428382784,2166285245&fm=26&gp=0.jpg'
            },
            {
              path: 'http://img0.imgtn.bdimg.com/it/u=1160601342,3492929116&fm=26&gp=0.jpg'
            },
            {
              path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3466898293,3868517763&fm=26&gp=0.jpg'
            },
            {
              path: 'http://img2.imgtn.bdimg.com/it/u=1442038534,817842994&fm=26&gp=0.jpg'
            },
          ],
          list1: [{
              name: 'mdi-cat',
              name1: '天猫新品',
              name2: 'mdi-heart',
              name3: '充值中心',
            },
            {
              name: 'mdi-heart',
              name1: '今日爆款',
              name2: 'mdi-pig',
              name3: '机票酒店',
            },
            {
              name: 'mdi-earth',
              name1: '天猫国际',
              name2: 'mdi-heart',
              name3: '领淘金币',
            },
            {
              name: 'mdi-eventbrite',
              name1: '饿了么',
              name2: 'mdi-heart',
              name3: '阿里拍卖',
            },
            {
              name: 'mdi-heart',
              name1: '天猫超市',
              name2: 'mdi-robot-mower-outline',
              name3: '淘鲜达',
            },
            {
              name: 'mdi-heart',
              name1: '会员中心',
              name2: 'mdi-heart',
              name3: '阿里健康',
            },
            {
              name: 'mdi-wrench-outline',
              name1: '造点新货',
              name2: 'mdi-heart',
              name3: '口碑生活',
            },
            {
              name: 'mdi-calendar-check',
              name1: '每日签到',
              name2: 'mdi-heart',
              name3: '会员店',
            },
            {
              name: 'mdi-heart',
              name1: '土货鲜食',
              name2: 'mdi-heart',
              name3: '天猫榜单',
            },
            {
              name: 'mdi-robot',
              name1: '菜鸟裹裹',
              name2: 'mdi-heart',
              name3: '更多频道',
            },
          ],
        }
      },
      methods: {
        select(index){
          this.curr = index
        }
      },
      vuetify: new Vuetify(),
    })
  </script>
</body>

</html>